<template>
	<view class="content">
		<u-sticky offset-top="0">
			<!-- 只能有一个根元素 -->
			<u-tabs :list="tabList" :is-scroll="false" font-size="28" height="88" bar-width="56" :bar-style="tabActive"
			 active-color="#171919" inactive-color="#666666" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="subject">
			<view class="order-item mt20" v-for="(odd,index) in list" :key="index">
				<view class="flex">
					<view class="item-num">订单号：539279789767758</view>
					<view class="item-type">{{odd.statusText}}</view>
				</view>
				<view class="pro-info" v-for="item in odd.value" :key="item.id">
					<orderModule :orderData="item"></orderModule>
				</view>
				<view class="amount flex">
					<view class="fs22 c9">已优惠:<span class="c3">10元</span></view>
					<view class="fs22 c3 ml40">共1个商品 实付：￥<span class="fs30">128</span></view>
				</view>
				<view class="flex btngroup">
					<u-button shape="circle" plain size="mini" class="ml20" v-if="odd.status !== 4">再来一单</u-button>
					<u-button shape="circle" plain size="mini" class="ml20" v-if="odd.status === 1">取消订单</u-button>
					<u-button shape="circle" plain size="mini" class="ml20" @click="handleShow" v-if="odd.status === 3||odd.status === 4">查看物流</u-button>
					<u-button shape="circle" plain size="mini" :custom-style="lastBtn" class="ml20" v-if="odd.status === 1">去支付</u-button>
					<u-button shape="circle" plain size="mini" :custom-style="lastBtn" class="ml20" v-if="odd.status === 2">联系客服</u-button>
					<u-button shape="circle" plain size="mini" :custom-style="lastBtn" class="ml20" v-if="odd.status === 3">确认收货</u-button>
					<u-button shape="circle" plain size="mini" :custom-style="lastBtn" class="ml20" v-if="odd.status === 4">评价商品</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" closeable height="960">
			<view class="sticsTit c3 fs30">物流信息</view>
			<u-gap height="160" bg-color="#fff"></u-gap>
			<stics></stics>
		</u-popup>
	</view>
</template>

<script>
	import order from "../../json/order.js"
	import orderModule from "../../components/orderitems/modualar.vue"
	import stics from "../../components/orderitems/stics.vue"
	export default {
		components: {
			orderModule,
			stics
		},
		data() {
			return {
				current: 0,
				show: false,
				tabList: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待使用'
				}, {
					name: '评价'
				}],
				tabActive: {
					background: "#FCB900"
				},
				list: [],
				lastBtn: {
					borderColor: "#F9274A",
					color: "#F71D41"
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			handleShow() {
				this.show = !this.show;
			},
			setOrderType() {
				order.orderList.map(item => {
					switch (item.status) {
						case 0:
							item.statusText = "待付款"
							break;
						case 1:
							item.statusText = "待发货"
							break;
						case 2:
							item.statusText = "待收货"
							break;
						case 3:
							item.statusText = "已完成"
							break;
						default:
							break;
					}
				})
			}
		},
		onLoad() {
			this.setOrderType();
			this.list = order.orderList;
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.subject {
		padding: 0 20rpx;
	}

	.order-item {
		background: #FFFFFF;
		padding: 32rpx 24rpx 24rpx;
		border-radius: 12rpx;
	}

	.item-num {
		color: #333333;
		font-size: 28rpx;
	}

	.item-type {
		color: #F7192F;
		font-size: 24rpx;
	}

	.pro-info {
		margin-top: 40rpx;
	}

	.amount {
		justify-content: flex-end;
	}

	.ml40 {
		margin-left: 20rpx;
	}

	.btngroup {
		justify-content: flex-end;
		margin-top: 55rpx;
	}

	.sticsTit {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #F0F0F0;
		background: #FFFFFF;
		text-align: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}
</style>
